
import React, { useContext } from "react"
import AuthContext, { AuthContextProvider } from "../components/login-context/AuthContextProvider"



const Login = (props) => {
  const authCtx = useContext(AuthContext)

  const submitHandler = (event) => {
    authCtx.onLogin()
  }

  return (<button onClick={submitHandler}>登录</button>)
}


const Home = (props) => {
  const authCtx = useContext(AuthContext)

  const logoutHandler = (event) => {
    authCtx.onLogout()
  }


  return (
    <>
      <h1>Home</h1>

      <div>
        <p>token: {authCtx.token}</p>
        <p>userInfo: {JSON.stringify(authCtx.userInfo)}</p>
        <p>
        <button onClick={logoutHandler}>退出</button>
        </p>
      </div>
    </>
  )
}



// App
function App() {
  const { isLoggedIn } = useContext(AuthContext)

  return (
    <main>
      {
        !isLoggedIn ? <Login /> : <Home />
      }
    </main>
  )
}




function LoginApp() {
  return (
    <>
      <AuthContextProvider>
        <App />
      </AuthContextProvider>
    </>
  )
}

export default LoginApp

